<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.accordionY {  }
.accordionY .panel { border:1px solid #CCC;margin-top:-1px; }
.accordionY .panel .heading { margin:0;padding-left:30px;border-bottom:1px solid #CCC;line-height:1.4em; }
.accordionY .panel .heading.on{background:#FAFAFA url(../img/less.png) 8px 50% no-repeat;}
.accordionY .panel .heading.off{background:#FAFAFA url(../img/more.png) 8px 50% no-repeat;border-bottom:0;}
.accordionY .panel .content { padding:10px;}
/* ######### 注释 ######### */
.accordionX{overflow:hidden;}
.accordionX .panel{ float:left;overflow:hidden;width:300px; }
.accordionX .panel .heading{float:left;width:50px;}
.accordionX .panel .content{float:left;overflow:hidden;width:240px;}
/* ######### 注释 ######### */
#contact-slider{}
#contact-slider .panel{border:1px solid #CCC;margin-top:-1px;}
#contact-slider .panel .pane-toggler, #contact-slider .panel .pane-toggler-down{margin:0;padding-left:30px;border-bottom:1px solid #CCC;line-height:1.4em;}
#contact-slider .panel .pane-toggler-down{background:#FAFAFA url(../img/less.png) 8px 50% no-repeat;}
#contact-slider .panel .pane-toggler{background:#FAFAFA url(../img/more.png) 8px 50% no-repeat;border-bottom:0;}
#contact-slider .panel .content{padding:10px;}
/* ######### ######### 注释 ######### ######### */
/* 该方法存在的缺陷：行高固定，textarea和capture无法容纳 */
fieldset {font-size:12px; border:0; padding:0;}
fieldset legend{font-size:2em;}
fieldset dl, fieldset dt, fieldset dd { dis:block; position:relative; *zoom:1; line-height:2.5em; } /* 标准+(line-height) */
fieldset dl:after, fieldset dt:after, fieldset dd:after { content:""; display:block; clear:both; } /* 标准 */
fieldset dl { padding-left:16em; border-bottom:1px solid #D6D6D6; border-left:1px solid #D6D6D6; border-right:1px solid #D6D6D6; } /* 标准+两侧边框+下方边框 */
fieldset dt, fieldset dd{ height:2.5em; padding:0; border-top:1px solid #D6D6D6; } /* 左列和右列的共同属性 */
fieldset dt { width:16em; float:left; clear:left; margin:0; margin-right:-16em; left:-16em;
	color:#333; font-weight:bold; background:#E9E9E9 url(./img/bg_1x1_e9e9e9.gif) 100% 0 repeat-y; } /* 便准+色彩+背景+右侧边框(用背景图实现) */
fieldset dd { float:right; width:100%; clear:right; margin:0; margin-left:0; color:#000; background:#F9FBF0; } /* 标准+色彩+背景 */
fieldset dl dt{text-align:left;} /* 左列文字居左或居右 */
fieldset dl dt label,
fieldset dl dd input,
fieldset dl dd select,
fieldset dl dd textarea{ margin:0;padding:0; margin-left:0.5em; margin-right:0.5em; font-size:12px;} /* 共同属性 */
fieldset dl dt label{}
fieldset dl dd input{height:18px;border:1px solid #ccc;background:url(../../img/bg_input.gif);}
fieldset dl dd select{height:18px;border:1px solid #CCC;}
fieldset dl dd textarea{}
</style>
<script type="text/javascript" src="../js/mootools-core.js"></script>
<script type="text/javascript" src="../js/mootools-more.js"></script>
<script type="text/javascript">
window.addEvent('domready', function(){
	new Fx.Accordion($$('.accordionY .heading'),$$('.accordionY .content'),
		{
			onActive: function(toggler, i) {
				toggler.addClass('on');
				toggler.removeClass('off');
				i.addClass('on');
				i.removeClass('off');
			},
			onBackground: function(toggler, i) {
				toggler.addClass('off');
				toggler.removeClass('on');
				i.addClass('off');
				i.removeClass('on');
			},
			duration: 300,
			opacity: true,
			alwaysHide: true //是否可以全关闭
		}
	);
});
/* ######### ######### ######### 注释 ######### ######### ######### */
window.addEvent('domready', function(){
	new Fx.Accordion($$('.accordionX .heading'),$$('.accordionX .content'),
		{
			onActive: function(toggler, i) {
				toggler.addClass('on');
				toggler.removeClass('off');
				i.addClass('on');
				i.removeClass('off');
			},
			onBackground: function(toggler, i) {
				toggler.addClass('off');
				toggler.removeClass('on');
				i.addClass('off');
				i.removeClass('on');
			},
			duration: 800,
			opacity: true,
			alwaysHide: true//, //是否可以全关闭
			//width: true,
			//height:true
		}
	);
});
/* ######### ######### ######### 注释 ######### ######### ######### */
window.addEvent('domready',
function() {
	new Fx.Accordion($$('div#contact-slider.pane-sliders > .panel > h3.pane-toggler'), $$('div#contact-slider.pane-sliders > .panel > div.pane-slider'), {
		onActive: function(toggler, i) {
			toggler.addClass('pane-toggler-down');
			toggler.removeClass('pane-toggler');
			i.addClass('pane-down');
			i.removeClass('pane-hide');
			Cookie.write('jpanesliders_contact-slider', $$('div#contact-slider.pane-sliders > .panel > h3').indexOf(toggler));
		},
		onBackground: function(toggler, i) {
			toggler.addClass('pane-toggler');
			toggler.removeClass('pane-toggler-down');
			i.addClass('pane-hide');
			i.removeClass('pane-down');
			if ($$('div#contact-slider.pane-sliders > .panel > h3').length == $$('div#contact-slider.pane-sliders > .panel > h3.pane-toggler').length) Cookie.write('jpanesliders_contact-slider', -1);
		},
		duration: 800,
		opacity: false,
		alwaysHide: true
	});
});

</script>
</head>
<body>
参照文字
<div class="accordionY">
  <div class="panel">
    <h3 class="heading">Heading-1</h3>
    <div class="content">
      <ul>
        <li> <a href="http://twitter.com/joomla"> Twitter </a> </li>
        <li> <a href="http://www.youtube.com/user/joomla"> YouTube </a> </li>
        <li> <a href="http://www.facebook.com/joomla"> Facebook </a> </li>
        <li> <a href="http://friendfeed.com/joomla"> FriendFeed </a> </li>
        <li> <a href="http://www.scribd.com/people/view/504592-joomla"> Scribed </a> </li>
      </ul>
    </div>
  </div>
  <div class="panel">
    <h3 class="heading">Heading-2</h3>
    <div class="content">
      <ul>
        <li> <a href="http://twitter.com/joomla"> Twitter </a> </li>
        <li> <a href="http://www.youtube.com/user/joomla"> YouTube </a> </li>
        <li> <a href="http://www.facebook.com/joomla"> Facebook </a> </li>
        <li> <a href="http://friendfeed.com/joomla"> FriendFeed </a> </li>
        <li> <a href="http://www.scribd.com/people/view/504592-joomla"> Scribed </a> </li>
      </ul>
    </div>
  </div>
  <div class="panel">
    <h3 class="heading">Heading-3</h3>
    <div class="content">
      <ul>
        <li> <a href="http://twitter.com/joomla"> Twitter </a> </li>
        <li> <a href="http://www.youtube.com/user/joomla"> YouTube </a> </li>
        <li> <a href="http://www.facebook.com/joomla"> Facebook </a> </li>
        <li> <a href="http://friendfeed.com/joomla"> FriendFeed </a> </li>
        <li> <a href="http://www.scribd.com/people/view/504592-joomla"> Scribed </a> </li>
      </ul>
    </div>
  </div>
</div>
参照文字
<hr />
<div class="accordionX">
  <div class="panel">
    <h3 class="heading">Heading-1</h3>
    <div class="content">
      <ul>
        <li> <a href="http://twitter.com/joomla"> Twitter </a> </li>
        <li> <a href="http://www.youtube.com/user/joomla"> YouTube </a> </li>
        <li> <a href="http://www.facebook.com/joomla"> Facebook </a> </li>
        <li> <a href="http://friendfeed.com/joomla"> FriendFeed </a> </li>
        <li> <a href="http://www.scribd.com/people/view/504592-joomla"> Scribed </a> </li>
      </ul>
    </div>
  </div>
  <div class="panel">
    <h3 class="heading">Heading-2</h3>
    <div class="content">
      <ul>
        <li> <a href="http://twitter.com/joomla"> Twitter </a> </li>
        <li> <a href="http://www.youtube.com/user/joomla"> YouTube </a> </li>
        <li> <a href="http://www.facebook.com/joomla"> Facebook </a> </li>
        <li> <a href="http://friendfeed.com/joomla"> FriendFeed </a> </li>
        <li> <a href="http://www.scribd.com/people/view/504592-joomla"> Scribed </a> </li>
      </ul>
    </div>
  </div>
  <div class="panel">
    <h3 class="heading">Heading-3</h3>
    <div class="content">
      <ul>
        <li> <a href="http://twitter.com/joomla"> Twitter </a> </li>
        <li> <a href="http://www.youtube.com/user/joomla"> YouTube </a> </li>
        <li> <a href="http://www.facebook.com/joomla"> Facebook </a> </li>
        <li> <a href="http://friendfeed.com/joomla"> FriendFeed </a> </li>
        <li> <a href="http://www.scribd.com/people/view/504592-joomla"> Scribed </a> </li>
      </ul>
    </div>
  </div>
</div>
<div class="contact">
  <h2> <span class="contact-name">Contact Name Here</span> </h2>
  <div id="contact-slider" class="pane-sliders">
    <div style="display:none;">
      <div> </div>
    </div>
    <div class="panel">
      <h3 class="pane-toggler title" id="basic-details"><a href="javascript:void(0);"><span>联系人</span></a></h3>
      <div class="pane-slider content">
        <div class="contact-image"> <img src="/images/powered_by.png" alt="联系人图像" align="middle" /> </div>
        <p class="contact-position">Position</p>
        <div class="contact-address"> <span class="jicons-icons" > <img src="/media/contacts/images/con_address.png" alt="地址: "  /> </span>
          <address>
          <span class="contact-street"> Street Address </span> <span class="contact-suburb"> Suburb </span> <span class="contact-state"> State </span> <span class="contact-postcode"> Zip Code </span> <span class="contact-country"> Country </span>
          </address>
        </div>
        <div class="contact-contactinfo">
          <p> <span class="jicons-icons" > <img src="/media/contacts/images/con_tel.png" alt="电话: "  /> </span> <span class="contact-telephone"> Telephone </span> </p>
          <p> <span class="jicons-icons" > <img src="/media/contacts/images/con_fax.png" alt="传真: "  /> </span> <span class="contact-fax"> Fax </span> </p>
        </div>
        <p></p>
      </div>
    </div>
    <div class="panel">
      <h3 class="pane-toggler title" id="display-form"><a href="javascript:void(0);"><span>发送电子邮件</span></a></h3>
      <div class="pane-slider content">
        <div class="contact-form">
          <form id="contact-form" action="/index.php/using-joomla/extensions/components/contact-component/single-contact" method="post" class="form-validate">
            <fieldset>
              <legend>发送一封Email。所有标记为星号（*）的都是必填项。</legend>
              <dl>
                <dt>
                  <label id="jform_contact_name-lbl" for="jform_contact_name" class="hasTip required" title="姓名::您的姓名">姓名<span class="star">&#160;*</span></label>
                </dt>
                <dd>
                  <input type="text" name="jform[contact_name]" id="jform_contact_name" value="" class="required" size="30"/>
                </dd>
                <dt>
                  <label id="jform_contact_email-lbl" for="jform_contact_email" class="hasTip required" title="电子邮件::联络用Email">电子邮件<span class="star">&#160;*</span></label>
                </dt>
                <dd>
                  <input type="text" name="jform[contact_email]" class="validate-email required" id="jform_contact_email" value="" size="30"/>
                </dd>
                <dt>
                  <label id="jform_contact_emailmsg-lbl" for="jform_contact_emailmsg" class="hasTip required" title="主题::请在此处填写您的正文的主题。">主题<span class="star">&#160;*</span></label>
                </dt>
                <dd>
                  <input type="text" name="jform[contact_subject]" id="jform_contact_emailmsg" value="" class="required" size="60"/>
                </dd>
                <dt>
                  <label id="jform_contact_message-lbl" for="jform_contact_message" class="hasTip required" title="正文::请在此处填写正文。">正文<span class="star">&#160;*</span></label>
                </dt>
                <dd>
                  <textarea name="jform[contact_message]" id="jform_contact_message" cols="50" rows="10" class="required"></textarea>
                </dd>
                <dt>
                  <label id="jform_contact_email_copy-lbl" for="jform_contact_email_copy" class="hasTip" title="给自己发送一份副本::发送送一份信息副本到您补充的地址。">给自己发送一份副本</label>
                </dt>
                <dd>
                  <input type="checkbox" name="jform[contact_email_copy]" id="jform_contact_email_copy" value=""/>
                </dd>
                <dt></dt>
                <dd>
                  <button class="button validate" type="submit">发送邮件</button>
                  <input type="hidden" name="option" value="com_contact" />
                  <input type="hidden" name="task" value="contact.submit" />
                  <input type="hidden" name="return" value="" />
                  <input type="hidden" name="id" value="1:name" />
                  <input type="hidden" name="148076e8373199fd80b7b865c2800263" value="1" />
                </dd>
              </dl>
            </fieldset>
          </form>
        </div>
      </div>
    </div>
    <div class="panel">
      <h3 class="pane-toggler title" id="display-links"><a href="javascript:void(0);"><span>链接</span></a></h3>
      <div class="pane-slider content">
        <div class="contact-links">
          <ul>
            <li> <a href="http://twitter.com/joomla"> Twitter </a> </li>
            <li> <a href="http://www.youtube.com/user/joomla"> YouTube </a> </li>
            <li> <a href="http://www.facebook.com/joomla"> Facebook </a> </li>
            <li> <a href="http://friendfeed.com/joomla"> FriendFeed </a> </li>
            <li> <a href="http://www.scribd.com/people/view/504592-joomla"> Scribed </a> </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="panel">
      <h3 class="pane-toggler title" id="display-misc"><a href="javascript:void(0);"><span>其他信息</span></a></h3>
      <div class="pane-slider content">
        <div class="contact-miscinfo">
          <div class="jicons-icons"> <img src="/media/contacts/images/con_info.png" alt="其他信息: "  /> </div>
          <div class="contact-misc">
            <p>Information about or by the contact.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>
